import ArticleItem from '@/components/ArticleItem'
import { RootState } from '@/store'
import { getArticlesAPI } from '@/store/action/article'
import { InfiniteScroll, PullToRefresh } from 'antd-mobile'
import { useEffect, useRef, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'

type Props = {
  channel_id: number
}

export default function ArticleList({ channel_id }: Props) {
  const { activeId } = useSelector((state: RootState) => state.channel)
  const dispatch = useDispatch()
  // 获取仓库数据
  const { articles } = useSelector((state: RootState) => state.article)

  // 💥 articles 一开始是空对象，使用 ?. 访问更安全
  const list = articles[channel_id]?.list

  // 副作用
  useEffect(() => {
    // 所点击的频道已经拥有数据了   减少没有必要的请求
    if (list) return

    if (channel_id === activeId) {
      // console.log(channel_id)
      dispatch(getArticlesAPI({ channel_id }))
    }
  }, [channel_id, activeId, dispatch, list])

  // 触发刷新时的处理函数
  const changeRefresh = async () => {
    dispatch(getArticlesAPI({ channel_id, isRefresh: true }))
  }
  // 无限滚动组件
  const [hasMore, sethasMore] = useState(true)
  // 🕐需要准备一个记录加载状态的变量,防止触底后发送多次无效请求
  const loading = useRef(false)
  const handleLoadMore = async () => {
    // console.log('需要加载更多数据')
    // 🕐 如果数据正在加载中，就先退出
    if (loading.current) return
    // 🕐 更新标记，表示数据加载中
    loading.current = true
    try {
      // 发送请求获取更多数据，需要使用到上一次推荐的时间戳，防止获取到重复的新闻。
      await dispatch(
        getArticlesAPI({
          channel_id,
          timestamp: articles[channel_id].timestamp,
        })
      )
    } catch (error) {
      // 捕获错误
      sethasMore(false)
    }

    // 🕐 请求完成后，更新标记表示加载完毕
    loading.current = false
  }

  // 💥 没有列表，先不渲染
  if (!list) return null
  // 🔔 请求结束后，有列表数据了，再渲染列表
  return (
    <div>
      <PullToRefresh onRefresh={changeRefresh}>
        {list.map((item) => (
          <ArticleItem
            style={{ padding: 10 }}
            key={item.art_id}
            article={item}
          />
        ))}
        {/* 无限滚动组件 */}
        <InfiniteScroll loadMore={handleLoadMore} hasMore={hasMore} />
      </PullToRefresh>
    </div>
  )
}
